<template>
    <view class="container">
        <div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;" v-show="indent == '维保'">维保工单</div>
                    <div style="color: #1A512C;" v-show="indent == '巡检'">巡检工单</div>
                </div>
                <div style="height: 10rpx;"></div>
                <div style="display: flex;align-items: center;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">派单时间</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.launchTime??obj.createTime??'暂无' }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                </div>
                <div style="height: 10rpx;"></div>
                <!-- 表单 -->
                <div v-show="indent == '维保'" style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">派单类型</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.repairMaintainOrderState==0?'自派单':obj.repairMaintainOrderState==1?"手工单":'' }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">设备名称</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.deviceName }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">设备编号</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.deviceNo }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">所属部门</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.deptName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">紧急程度</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.emerDegree }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">故障类型</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.faultType }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">指定人员</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.userName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">设备状态</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.deviceSate==0?'正常':obj.deviceSate==1?'停用':'' }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex" style="align-items: flex-start;">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">任务描述</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <u--textarea disabled v-model="obj.taskDesc"></u--textarea>
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <u-line></u-line>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">设备状态</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.deviceSate==0?'正常':obj.deviceSate==1?'停用':'' }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                </div>
                <div v-show="indent == '巡检'" style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">接单人员</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.orderPersonName }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">巡检地点</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.inspectName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">巡检内容</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.inspectContent }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex" style="align-items: flex-start;">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">任务描述</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <u--textarea disabled v-model="obj.taskDescription"></u--textarea>
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 20px;"></div>
                    <u-line></u-line>
                    <div style="height: 10px;"></div>
                </div>
                <!-- 按钮 -->
                <div style="height: 10px;"></div>
                <div v-show="indent == '维保'" class="footer">
                    <div class="button-footers" @click="cancelWb">取消</div>
                    <div class="button-footer" @click="acceptTask">接受</div>
                </div>
                <div v-show="indent == '巡检'" class="footer">
                    <div class="button-footer" style="width: 40%;" @click="cancelOrd">取消</div>
                    <div class="button-footer" style="width: 40%;" @click="acceptXunjian">接受</div>
                </div>
                <div style="height: 2vh;"></div>
            </div>
        </div>
	</view>
</template>
<script>
import { insList,mainList,acceptWb,delInspectOrder,acceptXj,cancelWbTask } from '../api/api.js';
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            date: currentDate,
            indent:'',
            obj:{}
        }
    },
    methods: {
        //接受维保
        acceptTask(){
            let t = this;
            uni.showModal({
                title: '提示',
                content: '确认接受当前任务吗',
                success: function (res) {
                    if (res.confirm) {
                        acceptWb(t.obj.id).then(res=>{
                console.log(res.data,'res.data');
                if(res.data.code==200){
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                        setTimeout(()=>{
                            uni.navigateBack({delta:1})
                        },1000)
                }
            })
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '取消',
                            duration: 2000,
                            icon:'none'
                        });
                    }
                }
            });
            
        },
        //接受巡检
        acceptXunjian(){
            let t = this;
            uni.showModal({
                title: '提示',
                content: '确认接受当前任务吗',
                success: function (res) {
                    if (res.confirm) {
                        acceptXj(t.obj.id).then(res=>{
                console.log(res.data,'res.data');
                if(res.data.code==200){
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                        setTimeout(()=>{
                            uni.navigateBack({delta:1})
                        },1000)
                }
            })
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '取消',
                            duration: 2000,
                            icon:'none'
                        });
                    }
                }
            });
            
        },
        // 返回
        cancel(){
            uni.navigateBack({ delta: 1 })
        },
        cancelOrd(){
            let t = this;
            uni.showModal({
                title: '提示',
                content: '确认取消当前任务吗',
                success: function (res) {
                    if (res.confirm) {
                        delInspectOrder(t.obj.id).then(res=>{
                console.log(res.data,'res.data');
                if(res.data.code==200){
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                        setTimeout(()=>{
                            uni.navigateBack({delta:1})
                        },1000)
                }else{
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                }
            })
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '取消',
                            duration: 2000,
                            icon:'none'
                        });
                    }
                }
            });
        },
        cancelWb(){
            let t = this;
            uni.showModal({
                title: '提示',
                content: '确认取消当前任务吗',
                success: function (res) {
                    if (res.confirm) {
                        cancelWbTask(t.obj.id).then(res=>{
                console.log(res.data,'res.data');
                if(res.data.code==200){
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                        setTimeout(()=>{
                            uni.navigateBack({delta:1})
                        },1000)
                }else{
                    uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon:'none'
                        });
                }
            })
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '取消',
                            duration: 2000,
                            icon:'none'
                        });
                    }
                }
            });
        },
        bindDateChange: function(e) { //选择日期
            this.date = e.detail.value
            console.log('date', this.date)
        },
        getDate(type) { //年月日
            const date = new Date();
            // const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        //维保工单
        getWb(){
            uni.showLoading({
                    title: '加载中',
                    mask:true
                });
            mainList({
                repairMaintainState:'',
                type:'2'
            }).then(res=>{
                console.log(res.data.rows[0].repairMaintainTask);
                this.obj = res.data.rows[0].repairMaintainTask;
                if(this.obj){
                    uni.hideLoading();
                }
            }).catch(err=>{
                console.error(err,'err')
                uni.showToast({
                        title:'暂无工单',
                        icon:'none'
                    })
                setTimeout(()=>{
                    uni.navigateBack({delta:1})
                },1000)
            })
        },
        getXj(){
            insList({
                workOrderState:'1',
                type:'2'
            }).then(res=>{
                console.log(res.data);
                if(res.data.data.length>0){
                this.obj = res.data.data[0];
                }
            })
        }
    },
    computed:{
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    onShow(){
        let name;
        this.indent = uni.getStorageSync('pageIndent');
        if(this.indent == '维保'){
            name = '维保工单';
            this.getWb();
        }else if(this.indent == '巡检'){
            name = '巡检任务';
            this.getXj();
        }

        uni.setNavigationBarTitle({
		    title: name
	    });

    }
}
</script>
<style lang="scss">
.container{
    background: #394E36;
    .border{
        border-radius: 10px;
        background: #E3EDE2;
        height: 100vh;
        overflow-y: scroll;
        .border-content{
            width: 90%;
            margin-left: 5%;
        }
    }
}
.top-line{
    display: flex;
    align-items: center;
}
.line{
    background: #1A512C;
    width: 7rpx;
    height: 35rpx;
}
.form-flex{
    display: flex;
    align-items: center;
    width: 100%;
}
.borders{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
    width: 70%;
}
.borders-min{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.button-footer{
    width: 48%;
    height: 50px;
    background: #46A164;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}
.button-footers{
    width: 48%;
    height: 50px;
    background: #C34843;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}
</style>